import React from 'react';
import { Outlet, NavLink } from 'react-router-dom'
import style from './css/index.module.css'
import '../../App/index.css'

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Carousel } from 'antd';

const Index = () => {
    return (
        <div>
            <Carousel autoplay>
                <div>
                    <img className={style.banner_img} src="https://static.maizuo.com/v5/upload/7572cf53619677bedf1a657b0d295afc.jpg?x-oss-process=image/quality,Q_70" alt="" />
                </div>
                <div>
                    <img className={style.banner_img} src="https://static.maizuo.com/v5/upload/b7c056fa2ec0df3702b526f7535ab493.jpg?x-oss-process=image/quality,Q_70" alt="" />
                </div>
                <div>
                    <img className={style.banner_img} src="https://static.maizuo.com/v5/upload/f6cc1510a17ce3d424fac9a88c87db03.jpg?x-oss-process=image/quality,Q_70" alt="" />
                </div>
            </Carousel>
            <div className="flex">
                <NavLink to="/movie/hot" className={`${style.btn} ${style.hot_btn} ${style.active_btn}`}>正在热映</NavLink>
                <NavLink to="/movie/ing" className={`${style.btn} ${style.ing_btn}`}>即将上映</NavLink>
            </div>
            <Outlet></Outlet>
        </div>
    );
}

export default Index;
